<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Bitcoin 3D WebGL Demo">
    <meta name="author" content="Oleksandr Popov">
    <link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/icons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/icons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/icons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/icons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/icons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/icons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
    <link rel="manifest" href="/manifest.json">
    <meta name="msapplication-TileColor" content="#cccccc">
    <meta name="msapplication-TileImage" content="/icons/ms-icon-144x144.png">
    <meta name="theme-color" content="#cccccc">
    <title>Fur WebGL 2 demo</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="styles/css/theme.min.css">
    <link rel="stylesheet" href="styles/css/site.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
    <script data-main="js/app" src="js/lib/require.js"></script>
</head>

<body>
    <canvas id="canvasGL" class="canvasGL" style="display:none;">
        Your browser doesn't appear to support the
        <code>&lt;canvas&gt;</code> element.
    </canvas>
    <div class="controls">
        <div class="container-fluid">
            <div class="row" id="row-progress">
                <div class="col col-sm-8 col-sm-push-2">
                    <h3 class="text-center">Loading...</h3>
                    <div class="progress">
                        <div id="progressLoading" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0;">
                            0%
                        </div>
                    </div>
                </div>
            </div>
            <div class="row text-center">
                <div class="col col-sm-8 col-sm-push-2">
                    <div class="alert alert-danger" role="alert" id="alertError" style="display:none;">
                        Cannot initialize WebGL 2 context.
                    </div>
                </div>
            </div>
            <div class="row text-center">
                <div class="col col-sm-8 col-sm-push-2">
                    <h2 class="control-label" id="presetName">
                    </h2>
                </div>
            </div>
            <div class="row" id="row-settings" style="display: none;">
                <div class="col col-lg-5 col-md-8 col-sm-8">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label text-left">
                                Number of Layers
                            </label>
                            <div class="col-sm-9">
                                <input id="sliderLayers" class=".slider" type="text" data-provide="slider" data-slider-min="0" data-slider-max="50" data-slider-step="1" data-slider-value="20">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label text-left">
                                Layer Thickness
                            </label>
                            <div class="col-sm-9">
                                <input id="sliderThickness" class=".slider" type="text" data-provide="slider" data-slider-min="0.05" data-slider-max="0.5" data-slider-step="0.01" data-slider-value="0.15">
                            </div>
                        </div>
                    </form>
                    <div class="well well-sm">
                        Source code is available at GitHub: <a href="https://github.com/keaukraine/webgl-fur" target="_blank">https://github.com/keaukraine/webgl-fur</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="javascript:void(0)" id="toggleFullscreen" class="control-icon control-fs" style="display:none;">
        <i class="material-icons md-36 icon-enter-fs" title="Fullscreen Mode">fullscreen</i>
        <i class="material-icons md-36 icon-exit-fs" title="Exit Fullscreen">fullscreen_exit</i>
    </a>
    <a href="javascript:void(0)" id="toggleSettings" class="control-icon control-settings" style="display:none;">
        <i class="material-icons md-36 icon-show-settings" title="Settings">settings</i>
        <i class="material-icons md-36 icon-hide-settings" title="Close">close</i>
    </a>
    <a href="javascript:void(0)" id="nextPreset" class="control-icon control-next" style="display:none;" title="Next preset">
        <i class="material-icons md-48">chevron_right</i>
    </a>
    <a href="javascript:void(0)" id="previousPreset" class="control-icon control-previous" style="display:none;" title="Previous preset">
        <i class="material-icons md-48">chevron_left</i>
    </a>
</body>

</html>
